<template>
  <div class="all">
    <el-card>
      <div slot="header" class="clearfix">
        <div class="title">
          <el-row>
            <el-col :span="20">
              <div class="title-text">
                {{titleName}}
              </div>
            </el-col>
            <el-col :span="4">
              <div class="title-icon">
                <i class="el-icon-warning-outline"></i>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="quantity-style" v-if='quantityNum > 0 || quantityNum < 0 '>{{ quantityNum | formatting(quantityNum) }}</div>
      <div class="quantity-style" v-if='quantityNum == 0'> 0 </div>
      <div class="quantity-style" v-if='quantity > 0 || quantity < 0'>{{ quantity }}%</div>
      <div class="quantity-style" v-if='quantity == 0'> 0 </div>
      <div>
        <div :id="id" class="main" :ref='id'></div>
        <div style='width: 100%;height: 27px;'>
          <div class="foot" v-if='foorName'>
            <span class="foot-text">{{foorName}}：</span>
            <span>{{orderOfDay | formatting(orderOfDay)}}</span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
  let echarts = require('echarts/lib/echarts')
  require('echarts/lib/chart/line')			//饼图
  //下面的是需要的提示框
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/toolbox')
  require('echarts/lib/component/grid')
  require('echarts/lib/component/legend')

export default {
  name: "GradientStackedAreaChart",
  props:{
    //标头
    titleName:String,
    //中间数量
    quantity:Number,
    quantityNum:Number,
    //底部名字
    foorName:String,
    //底部数量
    orderOfDay:Number,
    //图表数组
    dataList:Array,
    dataXList:Array,
    //图表ID
    id:String
  },
  data() {
    return {
      clientWidth: 0,
    }
  },
  watch:{
    id(newName, oldName) {
      return newName
    },
    quantity(newName, oldName) {
      return newName
    },
    dataList(newName, oldName) {
      this.dataList = newName
      this.triggering()
    },
    dataXList(newName, oldName) {
      this.dataXList = newName
      this.triggering()
    },
    orderOfDay(newName, oldName) {
      return newName
    },
    quantityNum(newName, oldName) {
      return newName
    },
    clientWidth(newName, oldName) {
      this.clientWidth = newName
      this.triggering()
    },
  },
  filters:{
    formatting(num){
      if(num !== 0){
        num = num.toString().split("."); // 分隔小数点
        var arr = num[0].split("").reverse(); // 转换成字符数组并且倒序排列
        var res = [];
        for (var i = 0, len = arr.length; i < len; i++) {
          if (i % 3 === 0 && i !== 0) {
            res.push(","); // 添加分隔符
          }
          res.push(arr[i]);
        }
        res.reverse(); // 再次倒序成为正确的顺序
        if (num[1]) {
          // 如果有小数的话添加小数部分
          res = res.join("").concat("." + num[1]);
        } else {
          res = res.join("");
        }
        return res;
      }else{
        return 0
      }
    }
  },
  mounted() {
    this.clientWidth = this.$refs[this.id].clientWidth
    this.triggering()
  },
  methods:{
    triggering(){
      var chartDom = document.getElementById(this.id);
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        toolbox: {
          show:false,
          feature: {
            saveAsImage: {}
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          width: this.clientWidth * 0.7,
          height:'70px',
          bottom: '3%',
          containLabel: true
        },
        xAxis:   {
          show:false,
          type: 'category',
          boundaryGap: false,
          data: this.dataXList
        },
        yAxis:   {
          type: 'value',
          show:false
        },
        series: [
          {
            name: this.titleName,
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: this.dataList
          }
        ]
      };
      option && myChart.setOption(option);

      window.onresize = function () { // 监听窗口大小变化
        myChart.resize()       // 自适应大小变化
      }

    }
  }
}
</script>

<style scoped>
  .title-text{
    color: #8c8c8c;
  }
  .quantity-style{
    font-size: 30px;
    cursor: pointer;
    /*font-weight: bold;*/
  }
  .foot{
    float: left;
    width: 100%;
    padding: 5px 0;
    border-top: solid 1px #e8e8e8;
  }
  .title-icon{
    float: right;
    display: inline-block;
    margin-top: 3.5px;
  }
  .main{
    width: 100%;
    height: 70px;
   }
  .foot-text{
    display:inline-block;
    padding-bottom: 5px;
  }
  >>> .el-card__header{
    border-bottom: none !important;
    padding: 18px 20px 5px 20px;
  }
  >>> .el-card__body{
    padding: 10px 20px;
  }
  >>> .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
    box-shadow: none !important;
  }
</style>
